/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-01-16 18:22:37
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-16 18:34:51
 */
import React, { useState, useEffect } from 'react'
import axios from 'axios';
const DogShow = () => { 
    const [url, setUrl] = useState('')
    const [loading, setLoading] = useState(false)
    const [fetch, setFetch] = useState(false)
    const style = {
        width:200
    }
    /**
     * 如果后面的数组 表示依赖的函数
     */
    useEffect(() => { 
        setLoading(true)
        axios.get('https://dog.ceo/api/breeds/image/random').then(result => { 
            setUrl(result.data.message)
        }).finally(() => { 
            setLoading(false)
        })
    }, [fetch])
    return (
        <>
            {loading ? <p>狗狗读取中</p> : <img src={url} alt='dog' style={style} />}
            <button onClick={()=>setFetch(!fetch)}>切换图片</button>
        </>
    )
}

export default DogShow